<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="showForm=true">添加</button>
    <h1>购物列表</h1>
    <table border="1">
        <tr><td>编号</td><td>书名</td><td>价格</td><td>数量</td></tr>
        <tr v-for="(pro,index) in productList" :key="index">
            <td>{{index+1}}</td><td>{{pro.name}}</td><td>{{pro.price}}</td>
            <td>
                <button @click="changeCount(index)">+</button>
                {{pro.count}}</td>
        </tr>
    </table>
    <form v-show="showForm">
        书名:<input type="text" v-model="product.name"/><br/>
        价格:<input type="text" v-model="product.price"/><br/>
        数量:<input type="text" v-model="product.count"/><br/>
        <button type="button" @click="addProduct">添加</button>
    </form>
</div>
<script type="text/javascript" src="js/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            productList:[{name:"三国",price:100,count:2},{name:"三国2",price:50,count:3}],
            showForm:false,
            product:{}
        },
        methods:{
            addProduct(){
                this.productList.push(JSON.parse(JSON.stringify(this.product)));//把json对象转换为json字符串
            },
            changeCount(index){
                this.productList[index].count++;
            }
        },
        created:function(){
            console.log("created");
            console.log(this.$el)
        },
        mounted:function(){
            console.log(this.$el);
        }
    })
</script>
</body>
</html>